<template>
  <div class="hello">
      <el-header>会议管理</el-header>
      <el-button type="success" class="el-icon-plus" size="mini" style="margin-right:875px;background:#0186FF" @click="showModel = true">创建</el-button>
      
      <el-dialog
        title="提示"
        :visible.sync="showModel"
        width="30%">
        <el-input v-model="meeting.name" placeholder="请输入会议名称"></el-input>
        <el-input v-model="meeting.address" placeholder="请输入会议地址"></el-input>
        <div class="block">
          <el-date-picker
            style="width:100%"
            v-model="meeting.time"
            type="datetime"
            placeholder="选择会议时间">
          </el-date-picker>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="restMetting">取 消</el-button>
          <el-button type="primary" @click="createMeeting">确 定</el-button>
        </span>
      </el-dialog>


      <div>
          <el-table
            :data="tableData"
            border
            stripe
            :header-cell-style="getRowClass"
            class="table">
            <el-table-column
              fixed
              prop="id"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
              fixed
              prop="name"
              label="会议名称"
              width="150">
            </el-table-column>
            <el-table-column
              prop="address"
              label="会议地址"
              width="320">
            </el-table-column>
            <el-table-column
              label="会议时间"
              width="300">
              <template slot-scope="scope">
                {{scope.row.time | dateFmt('YYYY-MM-DD HH:mm:ss')}}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="300">
              <template slot-scope="scope">
                <el-button @click="handleLink(scope.row.id)" type="text" size="small" style="color:#0186FF">提问链接</el-button>
                <el-button @click="getQuestionList(scope.row)" type="text" size="small" style="color:#FFAD00">问题列表</el-button>
              </template>
            </el-table-column>
        </el-table>
      </div>
      <el-dialog
        title="提问链接"
        :visible.sync="linkModel"
        :before-close="handleLinkClose"
        width="30%">
        <div class="textAlign">
          <div class="marginTopDiv">
            <span class="headFont">访问方式</span>
            <div class="maginTop" type="info">公开:知道链接的所有人可进行提问</div>
          </div>
          <div class="marginTopDiv">
            <span class="headFont">提问链接</span>
            <div class="maginTop">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-input v-model="questtionLink" size="mini"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-button type="primary" size="mini"
                    class="tag-read" :data-clipboard-text="questtionLink" @click="copyAddress"
                    style="background:#439DFD"
                    >复制</el-button>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-button type="primary" size="mini" @click="dumpRouter" style="background:#FFAD00">打开</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="marginTopDiv" id="qrcode">
            <span class="headFont">提问二维码</span>
            <div class="maginTop">
              扫一扫，打开提问链接
            </div>
          </div>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
import Clipboard from 'clipboard';
export default {
  name: 'Meeting',
  data() {
    return {
      linkModel:false,
      meeting:{
        name:'',
        address:'',
        time:''
      },
      questtionLink:'',
      questionAddress:'',
      tableData: [],
      showModel:false
    }
  },
  methods: {
    addMeeting(){
      let _this = this
      this.axios.post('/meeting/',this.meeting).then((res)=>{
        _this.showModel = false
        _this.meeting = {
          name:'',
          address:'',
          time:''
        }
        _this.initMeetings()
        this.$notify({
          title: '成功',
          message: '创建成功',
          type: 'success'
        });
      }).catch((err)=>{
        console.log(err);
      })
    },
    copyAddress() {
        var clipboard = new Clipboard('.tag-read')
        clipboard.on('success', e => {
          this.$notify({
            title: '成功',
            message: '复制成功',
            type: 'success'
          });
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          this.$notify.error({
            title: '错误',
            message: '该浏览器不支持自动复制'
          });
          // 释放内存
          clipboard.destroy()
        })
    },
    createMeeting(){
      this.addMeeting()
    },
    dumpRouter(){
      this.$router.push({
        path:this.questionAddress
      })
    },
    getQuestionList(row){
      this.$router.push({
        path:'/meetingQuestions/',
        name:'MeetingQuestions',
        // params:row
        params:{
          "meetingId":row.id
        }
      })
      this.$store.dispatch("updateAction",row)
    },
    getRowClass ({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
            return 'background: #14AC83;color:#ffffff; '
        } else {
            return ''
        }
    },
    handleLink(id) {
      this.linkModel = true
      let qrcodeEL = document.getElementById("qrcode");
      let qrcode = new QRCode(qrcodeEL);  
      document.getElementById("qrcode").innerHTML = "";
      this.qrcode(id);
    },

    handleLinkClose(){
      this.questtionLink = '';
      this.questionAddress = '';
      this.linkModel = false
    },
    
    initMeetings(){
      this.axios.get('/meeting/').then((res)=>{
        this.tableData=res.data;
      }).catch((err)=>{
        console.log(err);
      })
    },
    qrcode(id) {
      this.questionAddress = '/question/'+id
      this.questtionLink = 'http://'+IPConfig.address+':'+IPConfig.port+'/#/question/'+id

      let qrcode = new QRCode('qrcode', {
        width: 132,  
        height: 132,
        text: this.questtionLink, // 二维码地址 完全路径
        colorDark : "#000",
        colorLight : "#fff",
      })
      
    },
    restMetting(){
      this.showModel=false
      this.meeting = {
        name:'',
        address:'',
        time:''
      }
    }
  },

  mounted(){
      this.initMeetings();
      setTimeout(() => {
        this.linkModel = false
      }, 1);
      this.linkModel = true
      
  }
}
</script>

<style scoped>
  .table{
    width: 70%;
    /* display: flex; */
    margin: 0 auto;
  }
  .headFont{
    size: 25px;
    color: black;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
  }
  .textAlign{
    text-align: left
  }
  .maginTop{
    margin-top: 10px;
  }
  .marginTopDiv{
    margin-top: 20px;
  }
  
</style>
